<template>
  <div class="center-module">
    <WorkshopButtons
      :workshops="workshops"
      :current-workshop="currentWorkshop"
      @switch-workshop="switchWorkshop"
    />
    <DeviceGrid
      :unique-lathe-names="uniqueLatheNames"
      :current-device="currentDevice"
      :auto-hover-device-name="computedAutoHoverDeviceName"
      :get-lathe-name-status="getLatheNameStatus"
      :get-lathe-name-icon="getLatheNameIcon"
      :device-has-real-lathe-name="deviceHasRealLatheName"
      @select-lathe-name-device="selectLatheNameDevice"
      @device-item-mouse-enter="handleDeviceItemMouseEnter"
      @device-item-mouse-leave="handleDeviceItemMouseLeave"
      @inquiry-from-log="inquiryFromLog"
    />

  </div>
</template>

<script>
import WorkshopButtons from './WorkshopButtons.vue'
import DeviceGrid from './DeviceGrid.vue'

export default {
  name: 'CenterModule',
  components: {
    WorkshopButtons,
    DeviceGrid
  },
  props: {
    workshops: {
      type: Array,
      default: () => [
        { id: 1, name: '一期车间' },
        { id: 2, name: '二期车间' },
        { id: 3, name: '三期车间' }
      ]
    },
    currentWorkshop: {
      type: Number,
      default: 1
    },
    uniqueLatheNames: {
      type: Array,
      default: () => []
    },
    currentDevice: {
      type: Object,
      required: true
    },
    autoHoverDeviceName: {
      type: String,
      default: null
    },
    getLatheNameStatus: {
      type: Function,
      required: true
    },
    getLatheNameIcon: {
      type: Function,
      required: true
    },
    deviceHasRealLatheName: {
      type: Function,
      required: true
    }
  },
  data() {
    return {
      isMouseOverDevice: false,
      autoPlayInterval: null,
      localAutoHoverDeviceName: null
    }
  },
  computed: {
    // 添加计算属性
    computedAutoHoverDeviceName() {
      // 如果鼠标悬停在设备上，不显示自动高亮
      return this.isMouseOverDevice ? null : this.localAutoHoverDeviceName
    }
  },
  watch: {
    uniqueLatheNames: {
      handler() {
        // 当设备列表变化时，重新开始自动轮播
        this.startAutoPlay()
      },
      immediate: true
    }
  },
  methods: {
    switchWorkshop(workshopId) {
      this.$emit('switch-workshop', workshopId);
    },

    selectLatheNameDevice(latheName) {
      this.$emit('select-lathe-name-device', latheName);
    },

    // 修改这两个方法以正确更新 isMouseOverDevice 状态
    handleDeviceItemMouseEnter() {
      this.isMouseOverDevice = true;  // 添加这行
      this.$emit('device-item-mouse-enter');
    },

    handleDeviceItemMouseLeave() {
      this.isMouseOverDevice = false; // 添加这行
      this.$emit('device-item-mouse-leave');
    },

    inquiryFromLog(log) {
      this.$emit('inquiry-from-log', log);
    },
    // 添加自动轮播相关方法
    startAutoPlay() {
      // 先清除现有的定时器
      this.stopAutoPlay()

      // 获取有效的设备列表
      const validDevices = this.uniqueLatheNames.filter(name => name)

      // 如果没有设备或鼠标悬停在设备上，则不启动自动播放
      if (validDevices.length === 0 || this.isMouseOverDevice) {
        return
      }

      let currentIndex = 0

      // 设置定时器，每2秒切换一次
      this.autoPlayInterval = setInterval(() => {
        // 再次检查是否应该继续自动播放
        if (!this.isMouseOverDevice && validDevices.length > 0) {
          this.localAutoHoverDeviceName = validDevices[currentIndex]
          currentIndex = (currentIndex + 1) % validDevices.length
        }
      }, 2000)
    },

    stopAutoPlay() {
      if (this.autoPlayInterval) {
        clearInterval(this.autoPlayInterval)
        this.autoPlayInterval = null
      }
      this.localAutoHoverDeviceName = null
    }
  },
  mounted() {
    // 组件挂载后开始自动轮播
    this.startAutoPlay()
  },

  beforeDestroy() {
    // 组件销毁前清除定时器
    this.stopAutoPlay()
  }
}
</script>

<style lang="scss" scoped>
.center-module {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}
</style>

<style lang="scss" scoped>
.center-module {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin: 0 20px;
}
</style>
